<template>
	<view class="goods-tab" :style="{ top: stickyTop + 'rpx' }" :class="[{active: isSelect}]">
		<scroll-view
			scroll-x="true"
			:scroll-left="scrollLeft"
			:scroll-with-animation="true"
			:show-scrollbar="false"
			class="tab-list"
		>
			<view
				class="tab-item"
				v-for="(item, index) in list"
				:key="index"
				:class="[{ active: active === index }]"
				@tap="tabChange(index)"
			>
				{{ item.label }}
				<view class="line"></view>
			</view>
		</scroll-view>
		<view class="tab-select" @tap="isSelect = !isSelect">
			<u-icon name="arrow-down" :class="[{ selected : isSelect }]" color="#9A9A9A"></u-icon>
		</view>
		
		<view class="select-bg" :class="[{active: isSelect}]">
			<view class="select-item" v-for="(item, index) in list" @tap="tabChange(index)">{{ item.label }}</view>
		</view>
	</view>
</template>

<script>
export default {
	name: 'Tab',
	props: {
		list: {
			type: Array,
			default: () => {
				return [];
			}
		},
		index: {
			type: Number,
			default: () => {
				return 0;
			}
		},
		stickyTop: {
			type: [Number],
			default: 0
		}
	},
	data() {
		return {
			active: 0,
			isSelect: false
		};
	},
	computed: {
		scrollLeft() {
			return (this.active - 1) * 60;
		}
	},
	watch: {
		index: {
			immediate: true,
			handler(val) {
				this.active = val;
			}
		}
	},
	methods: {
		tabChange(index) {
			this.active = index;
			this.$emit('tabChange', index);
			this.isSelect = false;
		}
	}
};
</script>

<style lang="scss" scoped>
	.goods-tab {
		width: 100%;
		position: sticky;
		@include flexBox(space-between);
		overflow: hidden;
		padding-bottom: 20rpx;
		z-index: 10;
		background: #F6F7FA;
		&.active {
			overflow: unset
		}
		.tab-list {
			width: 92%;
			white-space: nowrap;
			text-align: left;
			padding: 16rpx 12rpx 0 12rpx;
			box-sizing: border-box;
			overflow-x: auto;
			.tab-item {
				display: inline-block;
				// height: 60rpx;
				line-height: 48rpx;
				font-size: 28rpx;
				color: #333333;
				transition: 0.5s;
				border-radius: 8rpx;
				margin: 0 28rpx;
				.line {
					width: 60rpx;
					height: 12rpx;
					transition: 0.3s;
					margin: 10rpx auto 0;
					border-radius: 50rpx;
					margin-top: -20rpx;
				}
				&.active {
					color: #333333;
					font-weight: 600;
					// font-size: 30rpx;
					.line {
						background: $main-color;
					}
				}
			}
		}
		.tab-select {
			width: 8%;
			padding-top: 10rpx;
			padding-right: 12rpx;
			z-index: 100;
			@include flexBox(center, center);
			/deep/.u-icon {
				transform: rotate(0deg);
				transition: 0.3s;
				&.selected {
					transform: rotate(180deg);
				}
			}
		}
		.select-bg {
			position: absolute;
			width: 750rpx;
			height: 150rpx;
			background: rgba(0, 0, 0, 0.6);
			left: 0;
			bottom: -150rpx;
			transition: 0.5s;
			opacity: 0;
			padding: 10rpx 0;
			overflow: auto;
			@include flexBox(flex-start, flex-start, null, wrap)
			&.active {
				opacity: 1;
			}
			.select-item {
				font-size: 24rpx;
				color: #fff;
				padding: 5rpx 24rpx;
			}
		}
	}
</style>
